<template>
    <div>
        <div class="answerItemList">
            <div class="item"
            v-for="(item) in list" :key="item.id"
            @click="showDetail(item)"
            >

                <i :class="type[item.result]"></i>

                <div class="title space">
                    <span class="title">{{ item.title }}</span>
                </div>
                <div class="bottom">
                    <div style="text-align: left;width: 48%;">
                        <el-rate
                            v-model="item.level"
                            disabled
                            style="margin-top: 5px;"
                            >
                        </el-rate>
                    </div>
                    <div class="time">
                        <span class="type">{{ item.type }}</span>
                        <div>{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm') }}</div>
                    </div>
                </div>
            </div>
        </div>
        <topicPreview :topic="pre.topic" :answerItem="pre.answerItem" :drawer="drawer" @handleClose="drawer = false"/>
    </div>
</template>

<script>
    import topicPreview from '@/components/topic/topicPreview.vue'
    import { getAnswerItemDetail } from '@/api/answerItem'
    export default {
        components : {
            topicPreview
        },
        props : ['list'],
        data() {
            return {
                type : ['el-icon-error error', 'el-icon-success success','el-icon-info expire'],
                pre : {
                    topic : {}
                },
                drawer : false,
                ispc : sessionStorage.getItem('ispc') == 'true'
            }
        },
        methods : {
            showDetail({ id }){
                getAnswerItemDetail(id).then(res => {
                    if (res.code == 200) {
                        this.pre = res.data
                        this.drawer = true
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.answerItemList{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    @media screen and (max-width: 800px) {
        .item {
            margin: 5px 0;
            border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
            width: 100%;
        }
    }
    @media screen and (min-width: 800px) {
        .item {
            margin: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            border-radius: 10px;
            width: 390px;
        }
    }
    .item{
        position: relative;
        height: 100px;
        padding: 20px;
        cursor: pointer;
        .title{
            font-weight: 900;
        }
        .type{
            font-size: 12px;
            padding-left: 20px;
            color: #67C23A;
        }
        .bottom{
            padding-top: 5px;
            display: flex;
            &>div{
                width:50%;
                text-align: right;
            }
            .time{
                text-align: right;
                font-size: 12px;
                line-height: 20px;
            }
        }
        i{
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 30px;
        }
        .error{
            color: #F56C6C;
        }
        .success{
            color: #67C23A;
        }
        .expire{
            color: #909399;
        }
    }
}
</style>